import { FadeLoader } from 'react-spinners';
import styles from './ballCart.module.scss';
import { IPropsBall } from './ballCart.types';
import { GiBasketballJersey } from 'react-icons/gi';
import { CSSProperties } from 'react';

const override: CSSProperties = {
	display: 'block',
	margin: '0 auto',
	borderColor: 'red'
};

export const BallCart = ({ ball }: IPropsBall) => {
	const isLoading = true; 
	return (
		<>
			{ isLoading ?
				<FadeLoader
					color={'#ffa500'}
					loading={isLoading}
					cssOverride={override}
					size={150}
					aria-label="Loading Spinner"
					data-testid="loader"
				/> : 
				<div className={styles.ball_cart} onClick={() => console.log(ball.id)}>
					<span
						onClick={(e) => {
							e.stopPropagation(), console.log('click');
						}}
						className={styles.form}
					>
						<GiBasketballJersey color={'#ffa500'} size={40} />
					</span>
					<div>
						<div className={styles.img}>
							<img src={ball.image} width={300} />
						</div>
						<div className={styles.price}>
							<p>Цена {ball.price} р</p>
							<p>В корзину</p>
						</div>
						<div className={styles.description}>
							<p className={styles.item}>Описание:</p>
							<p>{ball.title}</p>
						</div>
					</div>
				</div>
			}
		</>
		
	);
};
